<script setup >

</script>

<template>
    <div class="box">
        <div class="loading">
            <div class="dot" v-for="v in 36" :key="v"></div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
$ballSize: 10px;
$containerSize: 100px;
$duration: 2s;
$n:36;
.box{
    height: 100%;
    background: skyblue;
    box-sizing: border-box;
    display: flex;
    .loading{
        width: $containerSize;
        height: $containerSize;
        // border: 1px solid #fff;
        margin: 100px auto;
        position: relative;
        border-radius: 50%;
        .dot{
            position: absolute;
            left: 50%;
            top: 0;
            width: $ballSize;
            height: $ballSize;
            margin-left: -$ballSize/2;
            margin-top: -$ballSize/2;
            // background: #f00;
            transform-origin: center $containerSize/2 + $ballSize/2;
            perspective: 70px;
            transform-style: preserve-3d;
            @for $i from 1 through $n{
                &:nth-child(#{$i}){
                    transform: rotate(($i - 1)*360deg/$n);
                    &::before,&::after{
                        animation-delay:-$duration / $n * ($i - 1) * 6 ;
                    }
                }
            }
            &::before,&::after{
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
            &::before{
                background: #000;
                top: -100%;
                animation: move-blak $duration  infinite;
                @keyframes move-blak {
                    0%{ animation-timing-function: ease-in;}
                    25%{ transform: translate3d(0,100%,$ballSize); }
                    50%{ transform: translate3d(0,200%,0); }
                    75%{ transform: translate3d(0,100%,-$ballSize); }
                    100%{ animation-timing-function: ease-out;}
                }
            }
            &::after{
                background: #fff;
                top: 100%;
                animation: move-white $duration  infinite;
                @keyframes move-white {
                    0%{ animation-timing-function: ease-in;}
                    25%{ transform: translate3d(0,-100%,$ballSize); }
                    50%{ transform: translate3d(0,-200%,0); }
                    75%{ transform: translate3d(0,-100%,-$ballSize); }
                    100%{ animation-timing-function: ease-out;}
                }
            }
        }
    }
}
</style>